<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04jQuery对象和dom对象区分</title>
    <script src="./js/jquery-3.6.0.js"></script>
    <script>
        // 4.1、什么是 jQuery 对象，什么是 dom 对象
        // Dom 对象
        // 1.通过 getElementById()、getElementsByName()/ByTagName()/ByClassName()查询出来的标签对象是 Dom 对象
        // 2.通过 createElement() 方法创建的对象，是 Dom 对象
        // DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]
        // jQuery 对象
        // 3.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
        // 4.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
        // 5.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
        // jQuery 对象 Alert 出来的效果是：[object Object]

        // 4.2、问题：jQuery 对象的本质是什么？
        // jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。

        // 4.4、Dom 对象和 jQuery 对象互转
        // ●DOM转换成为 jQuery 对象 : $(DOM对象)
        // ●jQuery 对象转为 dom 对象（*重点） : jQuery[下标]

        $(function () {

            // 4.1
            // 原生js Dom 对象
            // 1.通过 getElementById()、getElementsByName()/ByTagName()/ByClassName()查询出来的标签对象是 Dom 对象
            let btn = document.getElementById("btn01");
            // alert(btn);                      // [object HTMLButtonElement]
            // 2.通过 createElement() 方法创建的对象，是 Dom 对象
            let h2 = document.createElement("h2");
            // alert(h2);                      // [object HTMLH2Element]

            // jQuery 对象
            // 3.通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象
            var $btnObj = $("button");          // 2、传入参数为 [ 选择器字符串 ] 时,表示查询标签对象，是jQuery对象
            // alert($btnObj);                  // [object Object]
            // alert($btnObj.length);           // 2

            // 4.通过 JQuery 提供的 API 创建的对象，是 JQuery 对象
            var $divObj = $("<div>传入标签</div>"); // 3、传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对象，是jQuery对象
            // alert($divObj);                  // [object Object]

            // 5.通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
            let $btn = $(btn);                  // 4、传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象
            // alert($btn);                     // [object Object]
            // alert($.length);


            // 4.4、Dom 对象和 jQuery 对象互转
            let $btn2 = $(btn);                  // ●DOM转换成为 jQuery 对象 : $(DOM对象)
            // alert($btn2);                     // [object Object]

            let btn2Element = $btn2[0];         // ●jQuery 对象转为 dom 对象（*重点） : jQuery[下标]
            // alert(btn2Element);              // [object HTMLButtonElement]
        });
    </script>
</head>
<body>

<button id="btn01">SayHello</button>
<button>SayHello</button>
</body>
</html>